<template>
  <el-dialog
    title="生产厂家"
    class="companyChoose"
    :visible.sync="dialogVisible"
    width="52%"
    :before-close="handleClose"
  >
    <div class="dialogMainDiv">
      <div>
        <div class="topText">厂家名称：</div>
        <el-input v-model="search.searchText" placeholder="请输入搜索内容" class="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="searchClick" />
        </el-input>
      </div>
      <myTable
        ref="myTable"
        style="height: 94%"
        :row-key="'id'"
        :table-label="tableLabel"
        :table-data="tableData"
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        @getTableData="getTableData"
        @rowClickChange="rowClickChange"
      />
      <pagination
        :table-total-size="tableTotalSize"
        :search-data="searchData"
        class="dialogPaginationCSS"
        @getTableData="$refs.myTable.getTableData()"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submit">选 择</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getSupplier } from '@/api/system-management'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
export default {
  name: 'CompanyChoose',
  components: {
    myTable,
    pagination
  },
  data() {
    return {
      dialogVisible: false,
      // 表格数据
      search: {
        searchText: ''
      },
      searchData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {
          kind: 1
        }
      },
      // table需要的数据
      tableData: [],
      tableLabel: [
        {
          prop: 'name',
          label: '厂家',
          width: 200,
          showOverflowTooltip: false
        },
        {
          prop: 'supplies',
          label: '产品/服务',
          width: 150,
          showOverflowTooltip: false
        },
        {
          prop: 'address',
          label: '详细地址',
          showOverflowTooltip: true
        },
        // {
        //   prop: 'date',
        //   label: '评估日期',
        //   width: 170,
        //   showOverflowTooltip: false
        // },
        // {
        //   prop: 'assessScore',
        //   label: '评分',
        //   width: 70,
        //   showOverflowTooltip: false
        // },
        {
          prop: 'remark',
          label: '备注',
          width: 100,
          showOverflowTooltip: true
        }
      ],
      tableTotalSize: null,
      indexx: null, // formItem的index
      rowData: {
        id: null,
        value: ''
      }
    }
  },
  methods: {
    // 进入此页面初始化函数
    is(indexx) {
      this.dialogVisible = true
      this.indexx = indexx
    },
    // 提交函数
    submit() {
      this.$emit('submit', this.indexx, this.rowData)
      this.handleClose()
    },
    // 关闭函数
    handleClose() {
      this.$parent.eChooseIndex = false
      this.dialogVisible = false
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.rowData.id = val.id
      this.rowData.value = val.name
    },
    getTableData(cab) {
      getSupplier(this.searchData).then((res) => {
        this.tableData = res.data
        this.tableTotalSize = res.total_count
        cab(res.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['name'] = this.search.searchText
      this.$refs.myTable.getTableData()
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/pageTableTop.scss';
.companyChoose {
  .dialogMainDiv {
    height: 500px;
    padding: 20px;
  }
  /deep/.dialogPaginationCSS {
    .el-pagination {
      margin-bottom: 50px;
    }
  }
  /deep/ .el-dialog__body {
    padding: 10px 0px !important;
  }
  /deep/ .el-card__body {
    padding: 0.3rem 1rem !important;
  }
  /deep/ .el-dialog__title {
    font-size: 21px;
  }
  /deep/ .el-tree {
    border-right: none;
    height: 540px;
    .tree-spt {
      padding-left: 15px;
    }
    /deep/ .el-tree-node .is-current {
      background-color: #f5f7fa;
    }
    /deep/ .el-tree-node__expand-icon {
      float: right;
      margin-right: 1.5625rem !important;
    }
    /deep/ .el-tree-node__content {
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 16px;
    }
    /deep/ .el-tree--highlight-current /deep/ .el-tree-node.is-current > .el-tree-node__content {
      background: #ecf5ff;
    }
  }
  /deep/ .el-input-group__append {
    padding: 0px 10px;
  }
}
</style>
